<template>
  <div class="header-title">当前主题</div>
  <ThemeCard
    :btn="['收藏']"
    :bgColor="theCurrentThemeColor"
    :title="title"
    :data="getThemeCardData"
    @reload="init"
  />
  <div class="line"></div>
  <div class="header-title">主题颜色配置</div>
  <div class="subTitle">主题配置</div>
  <div class="colors">
    <div class="demo-color-block" v-for="it in titleVO">
      <div
        class="colors-select"
        :style="{ border: `1px solid ${it.configCode}`, background: 'white' }"
        v-if="currentTitleVO === it.sysSubColorConfigId"
      >
        <div :style="{ background: it.configCode }"></div>
      </div>
      <div
        class="colors-select"
        :style="{ background: it.configCode }"
        v-else
        @click="setCurrentTitleVO(it.sysSubColorConfigId)"
      ></div>
      <span class="demonstration">{{ it.configCode }}</span>
    </div>
  </div>
  <div class="colors-select">
    <el-color-picker v-model="color" @change="getColor" />
    <span class="demonstration">自定义颜色</span>
  </div>
  <div class="subTitle">按钮颜色</div>
  <div class="btns">
    <div class="btns-item" v-for="it in btnList">
      <el-button
        :type="it.configName === '其他类' ? '' : 'primary'"
        :icon="it.icon"
        :color="it.configName === '其他类' ? '' : it.configCode"
        :style="`
          --el-button-text-color: ${
            it.configName === '其他类' ? it.configCode : 'white'
          };
          --el-button-hover-text-color: ${
            it.configName === '其他类' ? '' : 'white'
          };
          --el-button-border-color:${
            it.configName === '其他类' ? it.configCode : ''
          };
        `"
      >
        {{ it.name }}
        <ColorSelect v-model="it.configCode" :visible="false" />
      </el-button>
    </div>
  </div>
  <div class="collectionBtns">
    <el-button type="primary" @click="submit" :loading="loading"
      >应用主题</el-button
    >
    <el-button
      type="primary"
      style="margin-left: 20px"
      @click="favoriteThemes"
      :loading="favoriteThemesLading"
      >收藏主题</el-button
    >
  </div>
  <div class="line"></div>
  <div class="header-title">收藏主题</div>
  <div class="collectionCard">
    <ThemeCard
      v-for="it in colorList"
      :bgColor="it.dto.sub.configCode"
      :data="it.dto"
      @reload="init"
      :title="it.dto.title"
      :btn="['应用', '删除']"
      :id="it.sysSubColorConfigUserId"
    />
  </div>
  <MFormDialog
    v-model="formDialog.visible"
    v-bind="formDialog"
    :fields="dialogFields"
    :httpAdd="httpAdd"
    @reload="formReload"
    :addTitle="status === 1 ? '应用主题' : '收藏主题'"
  ></MFormDialog>
<!--  <TButton name="新增">新增</TButton>-->
</template>

<script setup lang="ts">
import { ref, shallowRef, onMounted, reactive, computed } from 'vue'
import {
  Plus,
  DocumentCopy,
  Select,
  ChatLineSquare,
  Loading,
  Search,
  Document,
  Download,
  UploadFilled,
  Refresh,
  Upload,
  CaretRight,
  CircleCheckFilled,
  RefreshLeft,
  Promotion,
  Avatar,
  FolderDelete,
  FolderChecked,
  Check,
  DocumentRemove,
  Delete,
  DeleteFilled,
  ScaleToOriginal,
  Memo,
  CircleClose,
  Edit,
  Setting,
  Help,
  Timer,
  CircleCloseFilled
} from '@element-plus/icons-vue'
import ColorSelect from '@/components/colorSelect/colorSelect.vue'
import ThemeCard from './components/themeCard/themeCard.vue'
import {
  defaultSubInfo,
  useSub,
  userColorSave,
  getCollectSubList,
  collectSub
} from '@/api/system/globalSettings'
import { ElMessage } from 'element-plus'
import { useAppStore } from '@/store'
import { defaultTheme, dialogFields, colorToRgba } from './pageThemeColors'
const appStore = useAppStore()

onMounted(() => {
  init()
})

const themeCardData = ref()
const theCurrentThemeColor = ref('')
const title = ref('默认')
const init = (isRelad = false) => {
  defaultSubInfo().then((res) => {
    themeCardData.value = res.data
    titleVO.value = res.data.titleVO.map((i) => {
      i.sysSubColorConfigId = i.sysSubUserConfigId || i.sysSubColorConfigId
      return i
    })
    if (!isRelad) {
      btnList.value.forEach((i) => {
        let obj = res.data.btnVO.find((j) => j.configName === i.name)
        i.configCode = obj.configCode
        i.configName = obj.configName
        i.sysSubColorConfigId = obj.sysSubColorConfigId
      })
      currentTitleVO.value = titleVO.value[0].sysSubColorConfigId
      color.value = titleVO.value[0].configCode
      theCurrentThemeColor.value = titleVO.value[0].configCode
      title.value = res.data.title
    }
  })
  getCollectSubListInit()
}

const getThemeCardData = computed(() => {
  let data = {}
  try {
    let currentTheme = titleVO.value.find(
      (i) => i.sysSubColorConfigId === currentTitleVO.value
    )
    data = {
      button: themeCardData.value.btnVO,
      sub: currentTheme,
      title: themeCardData.value.title
    }
  } catch (e) {
    /* empty */
  }
  return data
})
const colorList = ref([])
const getCollectSubListInit = () => {
  getCollectSubList().then((res) => {
    colorList.value = [defaultTheme, ...res.data]
  })
}

const btnList = ref([
  {
    name: '新增',
    icon: shallowRef(Plus),
    color: '#5C7CF7'
  },
  {
    name: '复制类',
    icon: shallowRef(DocumentCopy),
    color: '#5C7CF7'
  },
  {
    name: '全选类',
    icon: shallowRef(Select),
    color: '#5C7CF7'
  },
  {
    name: '预选类',
    icon: shallowRef(ChatLineSquare),
    color: '#5C7CF7'
  },
  {
    name: '加载类',
    icon: shallowRef(Loading),
    color: '#5C7CF7'
  },
  {
    name: '查询类',
    icon: shallowRef(Search),
    color: '#5C7CF7'
  },
  {
    name: '普通操作类',
    icon: shallowRef(Document),
    color: '#5C7CF7'
  },
  {
    name: '下载类',
    icon: shallowRef(Download),
    color: '#5C7CF7'
  },
  {
    name: '上传类',
    icon: shallowRef(UploadFilled),
    color: '#5C7CF7'
  },
  {
    name: '刷新类',
    icon: shallowRef(Refresh),
    color: '#5C7CF7'
  },
  {
    name: '导入类',
    icon: shallowRef(Download),
    color: '#5C7CF7'
  },
  {
    name: '导出类',
    icon: shallowRef(Upload),
    color: '#5C7CF7'
  },
  {
    name: '任务执行类',
    icon: shallowRef(CaretRight),
    color: '#30BEFF'
  },
  {
    name: '更新类',
    icon: shallowRef(Refresh),
    color: '#30BEFF'
  },
  {
    name: '反选类',
    icon: shallowRef(CircleCheckFilled),
    color: '#30BEFF'
  },
  {
    name: '同步类',
    icon: shallowRef(RefreshLeft),
    color: '#30BEFF'
  },
  {
    name: '发送类',
    icon: shallowRef(Promotion),
    color: '#30BEFF'
  },
  {
    name: '审核类',
    icon: shallowRef(Avatar),
    color: '#30BEFF'
  },
  {
    name: '反审核类',
    icon: shallowRef(FolderDelete),
    color: '#30BEFF'
  },
  {
    name: '保存类',
    icon: shallowRef(FolderChecked),
    color: '#00CBAE'
  },
  {
    name: '确定类',
    icon: shallowRef(Check),
    color: '#00CBAE'
  },
  {
    name: '报送类',
    icon: shallowRef(DocumentRemove),
    color: '#00CBAE'
  },
  {
    name: '删除类',
    icon: shallowRef(Delete),
    color: '#FB695A'
  },
  {
    name: '作废类',
    icon: shallowRef(DeleteFilled),
    color: '#FB695A'
  },
  {
    name: '撤销撤单类',
    icon: shallowRef(ScaleToOriginal),
    color: '#848FBC'
  },
  {
    name: '重置类',
    icon: shallowRef(Refresh),
    color: '#848FBC'
  },
  {
    name: '撤单类',
    icon: shallowRef(Memo),
    color: '#848FBC'
  },
  {
    name: '撤销类',
    icon: shallowRef(CircleClose),
    color: '#848FBC'
  },
  {
    name: '取消类',
    icon: shallowRef(CircleCloseFilled),
    color: '#848FBC'
  },
  {
    name: '编辑类',
    icon: shallowRef(Edit),
    color: '#A678FC'
  },
  {
    name: '设置类',
    icon: shallowRef(Setting),
    color: '#A678FC'
  },
  {
    name: '帮助类',
    icon: shallowRef(Help),
    color: '#A678FC'
  },
  {
    name: '暂停类',
    icon: shallowRef(Timer),
    color: '#FAA145'
  },
  {
    name: '其他类',
    icon: shallowRef(CircleCloseFilled),
    color: '#000'
  }
])

const color = ref('')

const titleVO = ref([])

const currentTitleVO = ref()

const setCurrentTitleVO = (e) => {
  currentTitleVO.value = e
}

const getColor = (e) => {
  console.log('e', e)
  if (e) {
    userColorSave({ configCode: e, configName: e }).then(() => {
      init(true)
    })
  }
}

const status = ref(1) //1 应用 2 收藏
const loading = ref(false)
const submit = () => {
  status.value = 1
  formDialog.visible = true
}

const favoriteThemesLading = ref(false)
const favoriteThemes = () => {
  status.value = 2
  formDialog.visible = true
}

// 新增/编辑
const formDialog = reactive({
  visible: false,
  id: 0
})

const httpAdd = (e) => {
  console.log('data', e)
  let currentTheme = titleVO.value.find(
    (i) => i.sysSubColorConfigId === currentTitleVO.value
  )
  let data = {
    button: btnList.value.map((i) => ({
      configCode: i.configCode,
      configName: i.configName,
      sysSubColorConfigId: i.sysSubColorConfigId
    })),
    sub: {
      configCode: currentTheme.configCode,
      configName: currentTheme.configName,
      sysSubColorConfigId: currentTheme.sysSubColorConfigId
    },
    title: e.title
  }
  return status.value === 1 ? useSub(data) : collectSub(data)
}
const formReload = () => {
  if (status.value === 1) {
    let currentTheme = titleVO.value.find(
      (i) => i.sysSubColorConfigId === currentTitleVO.value
    )
    appStore.getTheme()
    appStore.setAppSetting({
      menu: {
        backgroundColor: currentTheme.configCode,
        textColor: '#FFFFFF',
        hoverBackgroundColor: colorToRgba(currentTheme.configCode, 0.4)
      }
    })
    init()
  } else {
    getCollectSubListInit()
  }
}
</script>

<style scoped lang="scss">
.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  padding-bottom: 30px;
}
.line {
  width: 100%;
  border: 1px dashed #eee;
  height: 0;
  margin: 20px 0;
}
.subTitle {
  font-size: 14px;
  color: #333;
  margin-bottom: 30px;
}
.colors {
  width: 100%;
  display: flex;
  margin-bottom: 30px;
  .demo-color-block {
    margin-right: 30px;
    .colors-select {
      width: 41px;
      height: 41px;
      border-radius: 50%;
      margin-bottom: 5px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      div {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
    }
    .ac {
      border: 2px solid #fff;
    }
    .demonstration {
      font-size: 12px;
      color: #333;
    }
  }
}
.colors-select {
  margin-bottom: 30px;
  .demonstration {
    margin-left: 10px;
    color: #333;
    font-size: 14px;
  }
}
.btns {
  width: 600px;
  display: grid;
  grid-template-columns: 120px repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 50px;
  .btns-item {
    .el-button {
      position: relative;
    }
  }
}
.collectionBtns {
  width: 100%;
  margin-bottom: 30px;
}
.collectionCard {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>
